<template>
    <div class="login-container">
        <div class="box">
            <img src="../../assets/image/login/left.jpg" alt class="fl">
            <div class="formbox fr">
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="txt_c">
                    <div class="imgs">
                        <img src="../../assets/top.png" alt>
                    </div>
                    <el-form-item prop="username">
                        <el-input
                            placeholder="请输入您的登录账号"
                            name="userName"
                            autocomplete="on"
                            v-model="ruleForm.userName"
                        >
                            <i slot="prefix" class="el-input__icon">
                                <icon-svg icon-class="user"/>
                            </i>
                        </el-input>
                    </el-form-item>
                    <el-form-item prop="password">
                        <!--<span class="svg-container">-->
                        <!--<icon-svg icon-class="pwd"/>-->
                        <!--</span>-->
                        <el-input
                            placeholder="请输入您的密码"
                            name="pwd"
                            :type="isShowPwd ? 'text' : 'password'"
                            @keyup.enter.native="handleLogin"
                            v-model="ruleForm.pwd"
                            autocomplete="on"
                        >
                            <i slot="prefix" class="el-input__icon">
                                <icon-svg icon-class="pwd"/>
                            </i>
                            <i slot="suffix" class="el-input__icon" @click="isShowPwd = !isShowPwd">
                                <icon-svg icon-class="eye"/>
                            </i>
                        </el-input>
                    </el-form-item>
                    <div class="txt">如果遇到登录问题请联系管理员</div>
                    <div>
                        <el-button
                            type="primary"
                            style="width:100%;margin-bottom:30px;"
                            :loading="loading"
                            @click.native="handleLogin()"
                        >登录</el-button>
                    </div>
                </el-form>
            </div>
        </div>
        <div class="bottom">
            <img src="../../assets/image/login/bottom.png" alt>
        </div>
    </div>
</template>

<script>
import { getMechanism } from "../../api/auth/login";

export default {
    data() {
        let validatePwd = (rule, value, callback) => {
            if (value === "") {
                callback(new Error("请输入密码"));
            } else {
                callback();
            }
        };
        return {
            ruleForm: {
                userName: "",
                pwd: "",
                checked: true
            },
            rules: {
                userName: [
                    { required: true, message: "请输入登录名", trigger: "blur" }
                ],
                pwd: [{ validator: validatePwd, trigger: "blur" }]
            },
            isShowPwd: false, // 是否显示密码
            loading: false, // 登录loading
            redirect: null, // 回调地址
            // 选择机构
            top: window.innerHeight / 2 - 120 + "px",
            dialogVisible: false,
            jgData: [],
            jgArr: [],
            region: ""
        };
    },
    methods: {
        handleLogin() {
            this.$refs["ruleForm"].validate(valid => {
                if (valid) {
                    this.loading = true;
                    this.$store
                        .dispatch("loginName", this.ruleForm)
                        .then(response => {
                            this.loading = false;
                            if (response.code) {
                                this.$message.error(response.message);
                                return;
                            }
                            window.location.href = "/";
                        })
                        .catch(() => {
                            this.loading = false;
                        });
                } else {
                    return false;
                }
            });
        }
    },
    created() {
        // 将参数拷贝进查询对象
        let query = this.$route.query;
        if (query.redirect) {
            // URL Encode
            this.redirect = decodeURIComponent(query.redirect);
        }
    }
};
</script>

<style scoped>
.login-container {
    position: relative;
    width: 100%;
    height: 100%;
    background: url(../../assets/image/login/bg.jpg) no-repeat center center;
    background-size: 100% 100%;
}
.box {
    position: absolute;
    height: 520px;
    width: 800px;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    overflow: hidden;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.5);
}
.formbox {
    margin-right: 50px;
    width: 400px;
}
.fl {
    float: left;
}
.fr {
    float: right;
}
.txt_c {
    text-align: center;
}
.imgs {
    padding: 40px 0;
}
.imgs img {
    width: 300px;
    margin: 0 18px;
}
.title {
    margin: 16px auto 30px;
    color: #cccccb;
    font-size: 20px;
    line-height: 32px;
}
.txt {
    margin: 30px 0;
    font-size: 14px;
}
.bottom {
    position: absolute;
    width: 330px;
    margin: auto;
    bottom: 40px;
    left: 0;
    right: 0;
}
.v {
    position: absolute;
    right: 10px;
    bottom: 10px;
    font-size: 12px;
    color: #cccccc;
}
</style>
